<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/eruda"></script>
    <script>eruda.init();</script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body style="background:#fff;">
    <canvas id="canvas" style="width:100%; height:100%; position:fixed;"></canvas>

    <script src="../dist/easy-canvas.min.js"></script>
    <script src="./draw.js"></script>
    <script>
        window.onload = function () {
            main()

        }
        window.onresize = function () {
            main()
        }

        function main() {
            const canvas = document.querySelector('#canvas')

            const ctx = canvas.getContext('2d')
            const dpr = window.devicePixelRatio
            const w = window.innerWidth
            const h = window.innerHeight
            canvas.width = w * dpr
            canvas.height = h * dpr
            ctx.scale(dpr, dpr)
            layer = easyCanvas.createLayer(ctx, { dpr, width: w, height: h, debug: true })

            const node = easyCanvas.createElement((h) => {
                return h('view', { styles: { backgroundColor: '#fff' } }, [
                    this.drawSimple(h),
                    this.drawInlineBlock(h),
                    this.drawTicket(h),
                    this.drawCard(h),
                    this.drawScrollViewX(h),
                    this.drawListItem(h),
                    this.drawAbsolute(h),
                    // h('view', { styles: { textAlign: 'left', lineHeight: 20, padding: 5 } }, [
                    //     ...('如果需要在text中间增加inline-block元素，请使用split将text分割成每个文字一个text元素，这种模式下maxline不生效，如果在最前面，请使用textIndent配合绝对定位'.split('').map(w => h('text', {}, w))),
                    //     h('button', { styles: { backgroundColor: '#ffd8bf' } }, 'Inline Block'),
                    //     h('text', { styles: { textIndent: 10 } }, '支持textIndent')
                    // ]),
                    h('text', {
                        styles: {
                            textDecoration: ['line-through']
                        }
                    }, '文字修饰')
                ])
            })
            console.log(ctx.measureText('measureText'))
            node.mount(layer)
            console.log(node)
        }

        // 注册全局组件
        easyCanvas.component('button', (opt, children, h) => this.drawButton(h, children))
        canvas.ontouchstart = ontouchstart
        canvas.ontouchmove = ontouchmove
        canvas.ontouchend = ontouchend
        canvas.onmousedown = ontouchstart
        canvas.onmousemove = ontouchmove
        canvas.onmouseup = ontouchend
    </script>
</body>

</html>